<template>
  <div class="permission-tree">
    <el-tree
      :data="menuList"
      :default-checked-keys="checkList"
      show-checkbox
      node-key="menuId"
      :props="defaultProps"
      @check="handleCheckClick"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ElTree } from 'element-plus'

interface IProps {
  menuList: any[]
  checkList: number[]
}

const defaultProps = {
  children: 'children',
  label: 'menuLabel'
}
defineProps<IProps>()

const allKeys = ref<number[]>([])

// tree的勾选事件
const handleCheckClick = (nodeObj: any, keysObj) => {
  allKeys.value = [...keysObj.checkedKeys, ...keysObj.halfCheckedKeys]
}

// 暴露一个方法获取选中的keys
function getAllKeys() {
  return allKeys.value
}

defineExpose({ getAllKeys })
</script>

<style scoped lang="less">
.permission-tree {
}
</style>
